<template>
  <div class="audit-dialog">
    <el-dialog :visible.sync="dialogFormVisible" :append-to-body="true" :before-close="handleClose" class="large-common-dialog-size" @close="resetForm">
      <Title title="审批意见" font-size="16px" style="margin: 0 0 24px"/>
      <div v-if="htmlContent" class="html-content-box">
        <div v-html="htmlContent"/>
      </div>
      <empty-placeholder v-else style="margin-bottom: 24px" />
    </el-dialog>
  </div>
</template>
<script>
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import Title from '@/components/Title';
export default {
  components: {
    EmptyPlaceholder,
    Title
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      htmlContent: ''
    };
  },
  methods: {
    resetForm() {
      this.htmlContent = '';
    },
    handleClose() {
      this.$emit('close');
      this.resetForm();
    },
    initData(content) {
      this.htmlContent = content;
    }
  }
};
</script>
<style lang="scss" scoped>
.html-content-box {
  max-height: 450px;
  overflow: auto;
  &::v-deep {
    img, video {
      border-radius: 8px !important;
      max-width: 600px;
      height: auto;
    }
    a {
      background-color: transparent !important;
      color: #406EFF !important;
      word-break: break-word;
    }
    ol, ul, p {
      margin: 0;
    }
    p {
      line-height: 1.5;
      text-align: left;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    blockquote {
      background-color: #f5f2f0;
      border-left: 8px solid #b4d5ff;
      display: block;
      font-size: 100%;
      line-height: 1.5;
      margin: 10px 0 16px;
      padding: 10px;
    }
    table {
      border-collapse: collapse;
      padding: 0;
      border: 1px solid #ccc;
      border-radius: 3px;
      margin-bottom: 6px;
      tbody > tr:first-child {
        background-color: #eee;
      }
      th, td {
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
      }
      td:last-child, th:last-child {
        border-right: none;
      }
    }
  }
}
</style>
